/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 9.1.2014, 15:00:35
    Author     : jirka
*/


@sweet-yellow: #eff3f4;
@sweet-black: #1a1a1a;
@sweet-green: #7cbbb3;
/* colors
----------------------------------------------- */
@orange: #f4b331;
@red: #d34f1f;
@white: #FFFFFF;
@grey: #615f62;
@grey1: #f2f2f2;





@11: #353c42;
@12: #394249;
@13: #7cbbb3;
@14: #eff3f4;
@15: #9aa7b0;

@21: #5e5e5e;
@22: #6f6f6f;
@23: #7f7f7f;
@24: #8f8f8f;
@25: #9f9f9f;

@31: #1a1a1a;
@32: #2b2b2b;
@33: #3c3c3c;
@34: #4d4d4d;
@35: #5e5e5e;

@41: #21232f;
@42: #1c1f26;
@43: #1c1d22;
@44: #161922;
@45: #1dd656;

@51: #3e3e32;
@52: #727361;
@53: #d6be9c;
@54: #f4dcc0;
@55: #0e0e0e;

@61: #5abbc2;
@62: #75a7a6;
@63: #dbc1a8;
@64: #f5e4d4;
@65: #0e0d09;

@71: #071730;
@72: #123555;
@73: #134f6b;
@74: #206876;
@75: #328a8b;

@81: #63807b;
@82: #61ffe6;
@83: #c8fff7;
@84: #15806e;
@85: #a1ccc5;

@91: #ecebf1;
@92: #222127;
@93: #736e68;
@94: #a69581;
@95: #d9ccc4;

@101: #0d0a03;
@102: #f49c30;
@103: #f07a10;
@104: #bd9d77;
@105: #e97013;

@111: #000000;
@112: #58595b;
@113: #8b8c8e;
@114: #ffffff;
@115: #4180c3;

@121: #737373;
@122: #808080;
@123: #ffffff;
@124: #404040;
@125: #e6e6e6;

@131: #37262e;
@132: #a05f67;
@133: #383d51;
@134: #59503f;
@135: #8a796f;

@141: #fcf9f0;
@142: #a1a195;
@143: #5b5f5e;
@144: #464646;
@145: #b78524;

@151: #ffb470;
@152: #e9734f;
@153: #d72315;
@154: #e75651;
@155: #ff8878;

@161: #beb25e;
@162: #80773e;
@163: #ffed7d;
@164: #403b1e;
@165: #e5d671;

@171: #8abd09;
@172: #65b403;
@173: #2f9613;
@174: #15772c;
@175: #1e5734;

@181: #e3d9a6;
@182: #a68e5e;
@183: #6e5537;
@184: #3f2f18;
@185: #221711;

@191: #ce342b;
@192: #f48221;
@193: #e2d2ae;
@194: #77787c;
@195: #000000;

@201: #5e86db;
@202: #425f99;
@203: #21304f;
@204: #28385a;
@205: #182035;

@211: #393d48;
@212: #4c5252;
@213: #549b9f;
@214: #5393ae;
@215: #fbf1aa;

@221: #48a65a;
@222: #d7d7d7;
@223: #27343d;
@224: #232d36;
@225: #48a65a;

@231: #88bbbf;
@232: #5a7d7f;
@233: #b4f9ff;
@234: #2c3e40;
@235: #a3e0e5;

@241: #a9bebf;
@242: #728081;
@243: #e2feff;
@244: #c3dbdb;
@245: #cce6e7;

@251: #241915;
@252: #aea69b;
@253: #e7d1c4;
@254: #f8f3e0;
@255: #788979;

@261: #c6b3a5;
@262: #58687f;
@263: #ff8675;
@264: #978287;
@265: #bdab79;

@271: #d3e4ff;
@272: #4499e9;
@273: #6eccff;
@274: #93d4e8;
@275: #f9ffff;

@281: #4396c0;
@282: #2d6580;
@283: #5ac9ff;
@284: #163240;
@285: #51b5e6;



/* CSS Reset (DO NOT EDIT)
----------------------------------------------- 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
input, textarea, keygen, select, button,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, div {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}

[hidden] {
        display: none;
}

*/

/* Transition */
a,
input,
button,
.button,
.mobile-nav-icon,
.mobile-nav-icon:before,
.gallery .gallery-item,
.block-item .wp-post-image,
.site-footer {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;        
}

/* --- GLOBAL --- */
body{font-family: Arial; font-size:12px;}
p{font-family: Arial; font-size:12px;}
strong{ color: @red; font-family: Arial, Helvetica, sans-serif;font-weight: bold;}
strong1{ color: @sweet-yellow; font-family: Arial, Helvetica, sans-serif;}
h1{font-family: 'titilliumBold'; font-size: 18px;}
h2{font-family: 'titilliumRegular'; font-size: 16px;font-weight: bold; line-height:60px; margin:0px auto 0px auto;text-align: center; text-transform:uppercase; padding-bottom:10px;}
h3{font-family: 'titilliumRegular'; font-size:14px;font-weight: bold; color: @sweet-black; line-height:25px; margin:0px auto 0px auto; text-transform:uppercase; padding-bottom:20px; }
section {padding: 62px;}
a{cursor: pointer; color: @red;}


ul{list-style-type: none;}

.reset{
    clear: both;
}
@font-face {
    font-family: 'titilliumRegular';
    src: url('../../../fonts/TitilliumWeb-Regular.ttf') format('truetype');        
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'titilliumBold';
    src: url('../../../fonts/TitilliumWeb-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 


html{
    height: 100%;
}

body{
    background-color: @sweet-black;
    height: 100%;
    /*background: url('../../../images/image.png') no-repeat;*/
    height: 800px;
    box-shadow: 0px 0px 0px 0px @sweet-black inset;
}

.active {
    font-weight:bolder;
    text-decoration: underline;
    background-color: white;
}
.content{
    min-height: 100%;

}

.first-page{


}

.second-page{

    height: 33.3%;
    min-height: 600px;
}

.third-page{
    height: 33.3%;
    min-height: 600px;
    background-color: @sweet-yellow;
}


.leftBlock {
    background-color: @sweet-black;
    text-align: right;

}

.visible-xs{
    text-align: left;


    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;   
}

/* Right Block (Menu) */    
.rightBlock {
    background-color: @sweet-black;
    text-align: left;
    color: @sweet-yellow;

}

.promo {
    text-align: center; 
    width: 100%;
    min-height: 60%;
    padding: 50px 62px 0px 62px;   
}
.thumbnail{
    position: relative;
    margin: 5px;
    padding: 5px;
    margin-bottom: 70px;
    background-color: @sweet-yellow;
    border-color: @sweet-green;
    border-style: hidden;
    border-width: 2px;


    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;

    -khtml-border-radius-topleft: 0px;
    -khtml-border-radius-topright: 0px;
    -khtml-border-radius-bottomleft: 0px;
    -khtml-border-radius-bottomright: 0px;

    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.newsBox{
    margin-left: 0px;
    padding-left: 26px;
    padding-right: 26px;
    width: auto;
}
.media-body{
    padding-bottom: 30px;
}



.jumbotron {
    margin-top: 200px;
    width: 45%;
    padding: 10px;
    color: @grey;
    background: rgba(red(@white), green(@white), blue(@white), 0.8);
    h1 {font-size: 22px; text-transform:uppercase;}
}

.btn-large{

    color: @sweet-black;
    background-color: @red;
    margin-left: 70%;



}

.breadcrumb{
    background: rgba(red(@sweet-black), green(@sweet-black), blue(@sweet-black), 0.8);
    position: absolute;
    left: 800px;
    top: 120px;
    z-index: 1;

}

.more{
    background: rgba(red(@white), green(@white), blue(@white), 0.6);
    left: 1100px;
    top: 30px;    
}

#vice {


}

.btn-large{
    border: none;
    font-family: arial;
    font-size: 12px;
}

.mycontent{

}

#header {
    text-align: right;

}

.logoH{
    margin-top: 50px;

}

.logoV{
/*    margin-top: 10px; 
    margin-left: 290px; 
    text-align: right;
    float:left;*/
    position: absolute;
    left: -55px;
    top: 10px;
}

.white{
    color: @white;  
}

.top-filter-box{
    margin-top: -240px;
}

.lesson{
    background-color: @white;
}


.levelMenu{
    background-color: @grey;
    position: relative;
    z-index: 2002;
}
.lesson-box{
    text-align: left;
    float: left;
    width: 185px;
    height: 250px; 
    padding: 5px;
    margin-left: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: @white;
    position: relative;
    z-index: 2000;
    h1{font-size:12px; line-height:13px; margin:0px auto 0px auto;text-align: left; text-transform: none; padding-bottom:10px; padding-top:20px;}
    p{font-size:10px;} 

}

.paging{
    position: relative;
    top: 0px;
    margin: auto;
    width: 240px;
    text-align: center;
}

.footer{
    background-color: @sweet-black;
    color: @sweet-yellow;
    text-align: center;
}  

.video-detail-description{
    padding: 10px;
    h1{font-size:16px; padding-top:20px; line-height:13px; margin: 0px 0px 0px 0px;text-align: left; text-transform: none; text-decoration:bold; color: @sweet-yellow; }
    background-color: @sweet-green;
    text-align: left;
}    

.img-lesson-detail{ 
    float: left;
    width: 180px;
    background-color: red;
}
.comment-lesson-detail-RB{
    float: right;
    width: 200px;
    text-align: left;
    background-color: @sweet-yellow;
    padding: 10px;
}
.comment-lesson-detail{    
    text-align: left;
    background-color: @sweet-yellow;
    padding: 10px;
    margin-left: -20px;

}
.comment{
    padding: 10px;
    text-align: left;
    border-style: dashed;
    background-color: @165;
    margin-top: 10px;
    width: 100%;
}



.commentIN{
    text-align: left;
    word-wrap: break-word;
    overflow: auto; 
    background-color: @165;
    margin-top: 10px;
    width: 100%;
    padding-left: 80px;
}

.profilIMG{
    width: 80px;
    height: 80px;
    float: left;
    padding-right: 10px;
    padding-bottom: 10px;

}


.lesson-detail{
    position: absolute;
    margin-top: 160px; 
    text-align: left;
    padding-right: 10px;
    padding-bottom: 30px;
    min-height: 500px;
}

.y{
    color: yellow;
    padding-left: 5px;
    padding-right: 15px;
    
}

.LOG{
    float: left;
    color: white;
    font-size: 20px;
    font-family: 'titilliumBold';
    padding-left: 10px;
    padding-right: 75px;
    margin-top: -5px;


}





.login{
    background: @orange;
    border-left-color: yellow;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;

    -khtml-border-radius-topleft: 20px;
    -khtml-border-radius-topright: 0px;
    -khtml-border-radius-bottomleft: 0px;
    -khtml-border-radius-bottomright: 0px;

    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;

    border-top-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    height: 40px;
    width: 350px;
    text-decoration:bold; 
    margin-top: 10px;
    a{cursor: pointer; color: @grey;}
    font-size: 9px;
    font-family: 'titilliumRegular';
    border-style: solid;   
    border-bottom: none;
    border-right: none;
    border-width: 3px;
    border-color: yellow;

}
.login ul{   
    margin: 0px;
    padding: 10px;
    list-style-type: none;


}

.login ul li{
    display: inline;     
}

.menuBox{
    width: auto; 
    /*top: -10px;*/
    display: block;
    
    @media (min-width: 768px) {
      position: absolute;
      right: 0;
    }
    
    @media (max-width: 767px) {
      margin: auto;
    }
    
    
}


.learn{
    background: @orange;
    border-left-color: yellow;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;

    -khtml-border-radius-topleft: 0px;
    -khtml-border-radius-topright: 20px;
    -khtml-border-radius-bottomleft: 0px;
    -khtml-border-radius-bottomright: 0px;

    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;

    border-top-left-radius: 0px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    height: 40px;
    text-decoration:bold; 
    margin-top: 20px;
    a{cursor: pointer; color: @grey;}
    border-style: solid;   
    border-bottom: none;
    border-left: none;
    border-width: 3px;
    border-color: yellow;
    margin-top: 10px;
    width: 100%;    
    padding-top: 5px;
    color: white;
    font-size: 20px;
    font-family: 'titilliumBold';
    padding-left: 10px;
    float:left;
}

.overview{
    font-family: 'titilliumRegular';
    font-size: 14px;
    ul li a{color: @grey;}
}

.overview1{
    position: absolute;
    /*margin-top: -40px;*/
    /*margin-left: -60px;*/
    text-align: center; 
    float: left;
    padding-right: 40px;
}

.overview2{
    position: absolute;
    /*margin-top: -40px;*/ 
    margin-left: 160px;
    text-align: center;
    float: left;
}

.overview3{
    position: absolute;
    /*margin-top: -40px;*/
    margin-left: 360px;
    text-align: center;
    float: left;
}

.logIMG{
    display: block;
    background: url('../../../images/log1.png') no-repeat;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 9px;
}

.logIMG a :hover {  
    display: block;
    background: url('../../../images/log2.png') no-repeat;
}

.logIMG1{
    display: block;
    background: url('../../../images/reg1.png') no-repeat;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 9px;
}

.logIMG1 a :hover {  
    display: block;
    background: url('../../../images/reg2.png') no-repeat;
}

.menuBoxLesson{
    /*margin-left:715px;*/
    /*margin-top: -60px;*/
}

.menu{
    font-family: 'titilliumRegular';
    font-size: 14px;
    position: relative;
    height: 45px;
    margin-left: 2px;
    width: 348px;
    text-transform: none;
    text-decoration:bold;
    z-index: 1200;
    color: @grey;
    background: @grey1;
    ul li a{color: @grey;}




}
.menu ul{   
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    list-style-type: none; 

}

.menu ul li{
    display: inline; 
    white-space: nowrap;
    a:hover {
        text-decoration: underline;
        font-weight: bold;
    }

}

.menu a{
    color: black;


}

.logForm{
    font-family: 'titilliumRegular';
    position: relative;
    z-index: 1999;
    text-align: right;
    background-color: white;
    padding: 20px;
    margin-top: auto;
    width: 350px;
}

.loginSubmit{
    text-align: center;
}

.loginName{
    padding-left: 15px;
    float: right;  
}
.loginPass{
    padding-left: 15px;
    float: right;
}

.regForm{
    font-family: 'titilliumRegular';
    position: relative;
    z-index: 1999;
    text-align: right;
    background-color: white;
    padding: 20px;
    margin-top: auto;
    width: 350px;
}

.video-detail-description{
    padding-top:20px;
    h1 {text-transform: uppercase;}   
}

.komentFormText {
    width: 100%;
    height: 100px;
}

.komentFormJmeno {
    margin-left: 10px;

}
.komentFormEmail {
    margin-left: 18px;
    margin-top: 10px;
}

.carousel{
    background: rgba(red(@white), green(@white), blue(@white), 0.8);
    height: 300px;
    width: 70%;
    margin: auto;
    top: 120px;    
}

.btn.btn-success {
    width: auto;
    font-size: 13px;
    margin-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-width: 4px;
    color: white;
    background-color: @red;
    background-image: linear-gradient(to bottom, @red, @red);
    border-color: white;
    font-family: 'titilliumRegular';
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;

    -khtml-border-radius-topleft: 20px;
    -khtml-border-radius-topright: 20px;
    -khtml-border-radius-bottomleft: 20px;
    -khtml-border-radius-bottomright: 20px;

    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}
.btn.btn-success:hover {
    color: white;
    background-color: @red;
    background-image: linear-gradient(to bottom, @red , @red);
    border-color: @grey;
}

.levels-menu{
    background-color: @grey1;
    width: 100%;
    margin-top: 100px;
}

.vice{
    font-size: 13px;
    font-family: 'titilliumRegular';
    padding-left: 25px;
    padding-right: 25px;
    color: @white;
    border-style: solid;
    border: 2;
    border-width: 4px;
    border-color: @white;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;

    -khtml-border-radius-topleft: 20px;
    -khtml-border-radius-topright: 20px;
    -khtml-border-radius-bottomleft: 20px;
    -khtml-border-radius-bottomright: 20px;

    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.vice:hover {
    color: @white;
    background-color: @red;
    border-color: @grey;
}

.hr {

    background-color: @grey;
    color:  @grey;
    height: 0.08em;



}

.filter {
    min-height: 100px;
    background: rgba(red(@white), green(@white), blue(@white), 1); 
    font-size: 14px;
    padding-top: 10px;
    text-align: center;
}

.profilStartIMG{
    width: 100%;
    height: 200px;   
    padding: 10px;


}